<template>
    <div v-if="showModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 "
        style="z-index: 9999;">
        <div class="bg-white p-8 rounded shadow-lg">
            <div class="mb-4">
                <label for="inputValue" class="block text-sm font-medium text-gray-700">{{ label }}</label>
                <input v-model="inputValue" type="text" id="inputValue"
                    class="mt-1 p-2 w-full border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200 focus:border-blue-500">
            </div>
            <div class="flex justify-end">
                <button @click="confirm"
                    class="px-4 py-2 bg-blue-500 text-white rounded mr-2 hover:bg-blue-700">确认</button>
                <button @click="cancel" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">取消</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, ref } from 'vue';

// 定义 props
const props = defineProps<{
    label: string;
}>();

// 定义 emits
const emits = defineEmits<{
    (event: 'confirm', value: string): void;
    (event: 'cancel'): void;
}>();

// 定义响应式数据
const showModal = ref(false);
const inputValue = ref('');

// 确认事件处理函数
const confirm = () => {
    emits('confirm', inputValue.value);
    showModal.value = false;
};

// 取消事件处理函数
const cancel = () => {
    emits('cancel');
    showModal.value = false;
};

// 打开模态框的方法
const open = () => {
    showModal.value = true;
};

// 暴露 open 方法，以便父组件调用
defineExpose({
    open
});
</script>
